<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>团购商城</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">

</head>
<body>
<header class="bar bar-nav">
    <h1 class='title'>团购商城</h1>
</header>
<nav class="topnav">
    <ul class="topul">
        <li><a class="select" href="###">水果餐饮</a></li>
        <li><a href="###">多彩装扮</a></li>
        <li><a href="###">精美服饰</a></li>
        <li><a href="###">家居百货</a></li>
        <li><a href="###">母婴宝贝</a></li>
        <li><a href="###">健康运动</a></li>
        <li><a href="###">科技电子</a></li>
    </ul>
</nav>

<div class="centerul">
    <ul>
        <!--第一个导航栏li水果餐饮所对的ul-->


        <ul>
            <li>
                <img src="../images/s1.png">
     <div class="div">
                <h2>水晶葡萄</h2>

                <p>
                    生长于中国葡萄之乡大泽山，为自家果园种植，整个生长过程均为葡萄自然生长不打农药，施用有机肥，整个生长过程套有无菌纸袋做到了真正的有机无公害。大泽山葡萄均为沙地生长例大饱满、皮薄肉厚、香甜可口，是自己食用或馈赠之佳品。</p>

         <div >
                    团购:￥
                    <button>23.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
    </div>
            </li>
            <li>
                <img src="../images/s2.png">
                <div class="div">
                <h2>新鲜黄杏</h2>

                <p>来自西安蓝田华胥新鲜大黄杏，品种齐全（包括凯特、金太阳、菜黄杏）等；口感清甜、个头大；纯天然、无污染、不催熟的绿色水果。</p>

                    <div >
                    团购:￥
                    <button>7.0</button>
                    单人:￥
                    <button>4.5</button>
                    团购人数:
                    <button>6</button>
                </div></div>
            </li>
            <li>
                <img src="../images/s3.png">
                <div class="div">
                <h2>烟台苹果</h2>

                <p>小两口现摘现发，栖霞苹果以其个大形正，色泽鲜艳，光洁度好，酸甜适中，香脆可口而著称。有机苹果，苹果个大、果形正，色泽鲜艳江润，外表光滑细腻，口味酸甜适口，咬一口细脆津纯，清香蜜味，且果肉硬度大，纤维少，质地细，素有“水果皇后”美誉，受到许多人的喜爱！
                   </p>

                    <div >
                    团购:￥
                    <button>5.0</button>
                    单人:￥
                    <button>3.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
            <li>
                <img src="../images/s4.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>通过绿色食品认证，认证编号：LB-15-1608122714A，产自荸荠之乡安徽庐江，个大、脆甜无渣，现挖现发，坏果包赔，目前5斤加送半斤再送去皮刀，满2份再减2元！1斤大概15只左右，快递默认韵达，不到包转！不明白的地方可以加18119685002详询！</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
        </ul>


        <!--第二个导航栏li多彩装扮所对应的ul-->

        <ul>
            <li>
                <img src="../images/t1.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
            <li>
                <img src="../images/t2.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
            <li>
                <img src="../images/t3.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
            <li>
                <img src="../images/t4.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
        </ul>

        <!--第三个导航栏li精美服饰所对影的ul-->

        <ul>
            <li>
                <img src="../images/f1.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
            <li>
                <img src="../images/f2.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
            <li>
                <img src="../images/f3.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
            <li>
                <img src="../images/f4.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
        </ul>


        <!--第四个导航栏家居百货li所对影的ul-->

        <ul>
            <li>
                <img src="../images/j1.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
            <li>
                <img src="../images/j2.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
            <li>
                <img src="../images/j3.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
            <li>
                <img src="../images/j4.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
        </ul>


        <!--第五个导航栏母婴宝贝li所对影的ul-->

        <ul>
            <li>
                <img src="../images/m1.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
            <li>
                <img src="../images/m2.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
            <li>
                <img src="../images/m3.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
            <li>
                <img src="../images/m4.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
        </ul>


        <!--第六个导航栏健康运动li所对影的ul-->

        <ul>
            <li>
                <img src="../images/p1.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
            <li>
                <img src="../images/p2.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
            <li>
                <img src="../images/p3.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
            <li>
                <img src="../images/p4.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
        </ul>


        <!--第七个导航栏科技电子li所对影的ul-->

        <ul>
            <li>
                <img src="../images/d1.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
            <li>
                <img src="../images/d2.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
            <li>
                <img src="../images/d3.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
            <li>
                <img src="../images/d4.png">
                <div class="div">
                <h2>地栗地梨</h2>

                <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                    我是内容我是内容我是内容我是内容</p>

                    <div >
                    团购:￥
                    <button>18.0</button>
                    单人:￥
                    <button>20.0</button>
                    团购人数:
                    <button>5</button>
                </div></div>
            </li>
        </ul>


    </ul>
</div>

<!--底部的三个按钮-->
<ul class="footer">
    <li class="footerselect"><span class="fa fa-home "></span><br>

        <p>首页</p></li>
    <li><span class="fa fa-user-circle-o "></span><br>

        <p>我的团</p></li>
    <li><span class="fa fa-cart-plus "></span><br>

        <p>订单</p></li>
</ul>

</body>
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.mobile.min.js"></script>
<script src="../js/velocity.min.js"></script>
<script src="../js/velocity.ui.min.js"></script>


<script src="../js/index.js"></script>
</html>